import { Col, Row, message, Spin } from 'antd';
import React, { Component, Suspense } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { connect, Dispatch } from 'umi';
import PageLoading from './components/PageLoading';
// import styles from './style.less';


import {
  statisticsTotalCount,
  statisticsDeviceStatus,
  statisticsOrgDevice,
  statisticsMaterialResource,
  statisticsPlanStatus,
} from './service';



const IntroduceRow = React.lazy(() => import('./components/IntroduceRow'));
const DevicesStatusStatistics = React.lazy(() => import('./components/DevicesStatusStatistics'));
const DeviceStatistics = React.lazy(() => import('./components/DeviceStatistics'));
const MaterialResourceStatistics = React.lazy(() => import('./components/MaterialResourceStatistics'));
const PlanStatusStatistics = React.lazy(() => import('./components/PlanStatusStatistics'));
const PlanReviewReminder = React.lazy(() => import('./components/PlanReviewReminder'));
// const EventList = React.lazy(() => import('./components/EventList'));

interface DashboardAnalysisProps {
  dispatch: Dispatch<any>;
  loading: boolean;
}

interface DashboardAnalysisState {
}

class DashboardAnalysis extends Component<DashboardAnalysisProps, DashboardAnalysisState> {
  state = {
     numbers:{
       devices:0,
       programs:0,
       plans:0,
      },
      deviceStatusData:[],
      devicesData:[],
      materialResourceData:[],
      planStatusData:[],
      spinning:false,
  }

  reqRef: number = 0;
  timeoutId: number = 0;

  statisticsOrgDeviceRequest = (params:any)=>{
    new Promise((resolve, reject) => {
      statisticsOrgDevice(params)
        .then((res) => {
          if(res){
            if (res.code === 200) {
              const data = res.data;
              this.setState({"devicesData":data});
              resolve(true);
            }else{
              message.error(res.message);
              resolve(false);
            }
            this.setState({"spinning":false});
          }
        })
        .catch((error) => {
          reject(error);
        });
    });
  }

  topOrgId = JSON.parse(localStorage.getItem("user")).topOrgId;

  componentDidMount() {

    //设置设备数，节目数，计划数
    new Promise((resolve, reject) => {
      statisticsTotalCount()
        .then((res) => {
          if(res){
            if (res.code === 200) {
              const data = res.data;
              this.setState({"numbers":{
                devices:data.deviceNum,
                programs:data.programNum,
                plans:data.planNum,
              }});
              resolve(true);
            }else{
              message.error(res.message);
              resolve(false);
            }
          }
        })
        .catch((error) => {
          reject(error);
        });
    });

    //设备状态统计
    new Promise((resolve, reject) => {
      statisticsDeviceStatus()
        .then((res) => {
          if(res){
            if (res.code === 200) {
              const data = res.data;
              this.setState({"deviceStatusData":data});
              resolve(true);
            }else{
              message.error(res.message);
              resolve(false);
            }
          }
          
        })
        .catch((error) => {
          reject(error);
        });
    });

    //设备分布统计
    let param = new Object();
    if(this.topOrgId != 10000){
      param["topOrgId"] = this.topOrgId;
    }
    this.statisticsOrgDeviceRequest(param);
    

    //素材资源统计
    new Promise((resolve, reject) => {
      statisticsMaterialResource()
        .then((res) => {
          if(res){
            if (res.code === 200) {
              const data = res.data;
              this.setState({"materialResourceData":data});
              resolve(true);
            }else{
              message.error(res.message);
              resolve(false);
            }
          }
        })
        .catch((error) => {
          reject(error);
        });
    });

    //计划状态统计
    new Promise((resolve, reject) => {
      statisticsPlanStatus()
        .then((res) => {
          if(res){
            if (res.code === 200) {
              const data = res.data;
              this.setState({"planStatusData":data});
              resolve(true);
            }else{
              message.error(res.message);
              resolve(false);
            }
          }
        })
        .catch((error) => {
          reject(error);
        });
    });
  }

  componentWillUnmount() {
    cancelAnimationFrame(this.reqRef);
    clearTimeout(this.timeoutId);
  }

  handleOrgIdChange = (param:any) =>{
    this.setState({"spinning":true});
    if(!param.topOrgId && this.topOrgId != 10000){ //非root用户点击清空所属机构情况下，默认传用户的topOrgId
      param["topOrgId"] = this.topOrgId;
    }
    this.statisticsOrgDeviceRequest(param);
  }

  render() {
    const { loading } = this.props;
    return (
      <PageContainer>
        <React.Fragment>
          <Suspense fallback={<PageLoading />}>
            <IntroduceRow loading={loading} numbers={this.state.numbers} />
          </Suspense>
          <Row
            gutter={24}
            style={{
              marginTop: 24,
            }}
          >
            <Col xl={12} lg={24} md={24} sm={24} xs={24}>
              <Suspense fallback={null}>
                <Suspense fallback={null}>
                  <DevicesStatusStatistics
                    loading={loading}
                    salesPieData={this.state.deviceStatusData}
                  />
                </Suspense>
              </Suspense>
            </Col>
            <Col xl={12} lg={24} md={24} sm={24} xs={24}>
              <Suspense fallback={null}>
                <Spin spinning={this.state.spinning}>
                 <DeviceStatistics
                    loading={loading}
                    salesPieData={this.state.devicesData}
                    handleOrgIdChange={this.handleOrgIdChange}
                  />
                  </Spin>
              </Suspense>
            </Col>
          </Row>
          <Row
            gutter={24}
            style={{
              marginTop: 24,
            }}
          >
            <Col xl={12} lg={24} md={24} sm={24} xs={24}>
              <Suspense fallback={null}>
                <Suspense fallback={null}>
                  <MaterialResourceStatistics
                    loading={loading}
                    salesPieData={this.state.materialResourceData}
                  />
              </Suspense>
              </Suspense>
            </Col>
            <Col xl={12} lg={24} md={24} sm={24} xs={24}>
              <Suspense fallback={null}>
                <PlanStatusStatistics
                    loading={loading}
                    salesPieData={this.state.planStatusData}
                  />
              </Suspense>
            </Col>
          </Row>
          <Row
            gutter={24}
            style={{
              marginTop: 24,
            }}
          >
            <Col xl={24} lg={24} md={24} sm={24} xs={24}>
              <Suspense fallback={null}>
                <Suspense fallback={null}>
                  <PlanReviewReminder
                    loading={loading}
                  />
              </Suspense>
              </Suspense>
            </Col>
            {/* <Col xl={12} lg={24} md={24} sm={24} xs={24}>
              <Suspense fallback={null}>
                <EventList
                  loading={loading}
                  />
              </Suspense>
            </Col> */}
          </Row>
        </React.Fragment>
      </PageContainer>
    );
  }
}

export default connect(
  ({
    loading,
  }: {
    loading: {
      effects: { [key: string]: boolean };
    };
  }) => ({
  }),
)(DashboardAnalysis);
